<template>
  <UniPopup ref="sysUserPopup" :z-index="999" background-color="#fff" :is-mask-click="false">
    <view class="sysUser-popup">
      <view class="popup-title disFlxJS px-16 py-12">
        <text>选择管理员</text>
        <view class="ali-icon icon-guanbi1" @click="close"></view>
      </view>
      <view class="popup-warning disFlx px-16 py-10">
        <view class="ali-icon icon-tips"></view>
        <view>只可从系统管理员中选择，如需新增其他管理员，请前往【管理后台】新增管理员。</view>
      </view>
      <scroll-view
        scroll-y
        :enable-flex="true"
        scroll-with-animation
        scroll-anchoring
        :enhanced="true"
        :show-scrollbar="false"
        @scrolltolower="handleScrollToLower"
        class="pa-12 pb-0"
        style="height: 600rpx"
      >
        <Paglist
          v-model="sysUserListRef"
          :is-init-api="false"
          :isPullDownRefres="false"
          :parame="{
            current: 1,
            size: 10,
          }"
          @register="register"
          :is-show-loadmore="sysUserListRef.length > 1"
        >
          <template v-for="item in sysUserListRef" :key="item.systemUserId">
            <view class="px-16 py-12 disFlxAC fz-16" @click="changeChecked(item)">
              <view class="pr-12 shrink0 check-box">
                <view
                  v-if="tempSelected?.systemUserId == item.systemUserId"
                  class="ali-icon"
                  :class="['icon-danxuan_xuanzhong']"
                  style="color: #2878ff"
                ></view>
                <view v-else class="ali-icon" :class="['icon-danxuan_weixuanzhong']"></view>
              </view>
              <view>
                <view class="disFlxAC">
                  <text class="ov-1 mr-12">{{ item.userName }}</text>
                  <CustomTag
                    v-if="item?.roleName"
                    :text="item?.roleName"
                    backgroundColor="#D0F7FF"
                    color="#2878FF"
                  ></CustomTag>
                </view>
                <view class="mt-4">{{ item.phone }}</view>
              </view>
            </view>
          </template>
        </Paglist>
      </scroll-view>
      <view class="px-16">
        <TButton class="gutter-btn" text="确认选择" type="primary" @click.stop="submitSelected" />
      </view>
    </view>
  </UniPopup>
</template>
<script setup lang="ts">
  import UniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue';
  import TButton from '@/components/TButtonGroup/TButton.vue';
  import { provide, ref, unref, type PropType } from 'vue';
  import { useConList } from '@/components/Paglist/useConList';
  import Paglist from '@/components/Paglist/index.vue';
  import type { SysUserResult } from '@/api/serviceForm/types';
  import CustomTag from '@/components/CustomTag/index.vue';
  import { sysUserList } from '@/api/serviceForm';

  const sysUserPopup = ref<UniPopupRef>();
  const sysUserListRef = ref<SysUserResult[]>([]);

  const emits = defineEmits(['change']);
  provide('api', sysUserList);
  const close = () => unref(sysUserPopup)?.close();
  const [register, { addData, refresh }] = useConList();
  const open = () => {
    refresh();
    unref(sysUserPopup)?.open('bottom');
  };
  function handleScrollToLower() {
    addData();
  }
  const tempSelected = ref<SysUserResult | null>(null);
  function changeChecked(systemUser: SysUserResult) {
    tempSelected.value = systemUser;
    return;
  }

  function submitSelected() {
    emits('change', tempSelected.value);
    close();
    tempSelected.value = null;
  }

  defineExpose({
    open,
  });
</script>
<style lang="scss" scoped>
  .popup-title {
    color: #333;
    font-size: 32rpx;
    .ali-icon {
      font-size: 40rpx;
      color: #c8cacc;
    }
  }

  .popup-warning {
    background-color: #fff4e7;
    font-size: 28rpx;
    color: #ea5e0e;
    .ali-icon {
      font-size: 36rpx;
    }
  }

  .shrink0 {
    flex-shrink: 0;
  }
  .check-box {
    width: 48rpx;
    .ali-icon {
      font-size: 40rpx;
      color: #999996;
    }
  }
</style>
